<template>
  <div>
    <a-row class="doing-item item-common" v-for="(item, i) in todos" :key="i">
      <a-col :span="3" class="h-3">
        <a-checkbox
          @change="onDoingChange(item)"
          class="check-icon"></a-checkbox>
      </a-col>
      <a-col
        contenteditable="true"
        v-text="`${item}`"
        @focus="handleFocus"
        @blur="handleBlur"
        class="h-3 editContext"
        :span="17">
      </a-col>
      <a-col :span="4" class="h-3 delete-icon-outer">
        <a-icon
          @click="deleteDoingItem(item)"
          class="delete-icon"
          type="close-circle"/>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  props: ['todos'],
};
</script>
